﻿@page "/"

@inject IKeyLoadEventBus KeyLoadEventBus

<CascadingValue Value="LayoutOptions" Name="@nameof(LayoutOptions)">
    <div class="header">
        <Header></Header>
    </div>
    <div style="height: 100%">
        <MCard Dark="LayoutOptions.Dark" Class="tools">
            @foreach (var item in _toolsModels)
            {
                <MTooltip
                    Right>
                    <ActivatorContent>
                        <MButton
                            Text
                            Height="@("50px")"
                             OnClick="() =>SetExtension(item.Key)"
                            Small>
                            <MIcon>
                                @item.Icon
                            </MIcon>
                        </MButton>
                    </ActivatorContent>
                    <ChildContent>
                        <span>@item.Description</span>
                    </ChildContent>
                </MTooltip>
            }
        </MCard>
        @foreach (var item in _toolsModels)
        {
            <div style="float: left;width: calc(100% - 50px);height: 100%;@(item.Key != Key?"display: none":string.Empty)">
                <DynamicComponent Type="item.Component"></DynamicComponent>
            </div>
        }
    </div>
</CascadingValue>

<style>
    .tools{
        height: 100%;
        max-height: 100%;
        width: 50px;
        background-color: aliceblue;
        float: left;
    }
    .header{
        height: 25px;
        width: 100%;
    }
</style>